<template>
  <div class="system-status-container">
    <!-- 平台信息模块 -->
    <el-card class="status-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>平台信息</span>
        </div>
      </template>
      <div v-if="systemInfo.platform" class="platform-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="CPU型号">{{
            systemInfo.platform.model
          }}</el-descriptions-item>
          <el-descriptions-item label="CPU核心数">{{
            systemInfo.platform.cores
          }}</el-descriptions-item>
          <el-descriptions-item label="系统架构"
            >{{ systemInfo.platform.arch }}
          </el-descriptions-item>
          <el-descriptions-item label="操作系统"
            >{{ systemInfo.platform.platform }} -
            {{ systemInfo.platform.release }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <el-empty v-else description="暂无平台信息" />
    </el-card>

    <!-- 内存信息模块 -->
    <el-card class="status-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>内存信息</span>
        </div>
      </template>
      <div v-if="systemInfo.memory" class="memory-info">
        <div class="gauge-container">
          <el-progress
            type="dashboard"
            :percentage="memoryUsagePercentage"
            :color="getColorByPercentage(memoryUsagePercentage)"
            :stroke-width="15"
          >
            <template #default>
              <div class="gauge-inner-text">
                <!-- <div>已使用</div>
                <div>
                  {{ formatMemory(systemInfo.memory.used) }} /
                  {{ formatMemory(systemInfo.memory.total) }}
                </div> -->
                <div>{{ memoryUsagePercentage }}%</div>
              </div>
            </template>
          </el-progress>
        </div>
        <el-descriptions :column="1" border class="memory-details">
          <el-descriptions-item label="总内存">{{
            formatBytes(systemInfo.memory.total)
          }}</el-descriptions-item>
          <el-descriptions-item label="已使用">{{
            formatBytes(systemInfo.memory.used)
          }}</el-descriptions-item>
          <el-descriptions-item label="可用内存">{{
            formatBytes(systemInfo.memory.free)
          }}</el-descriptions-item>
          <el-descriptions-item label="使用率"
            >{{ memoryUsagePercentage }}%</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <el-empty v-else description="暂无内存信息" />
    </el-card>

    <!-- GPU信息模块 -->
    <el-card class="status-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>GPU信息</span>
        </div>
      </template>
      <div
        v-if="systemInfo.gpus && systemInfo.gpus.length > 0"
        class="gpu-info"
      >
        <div
          v-for="(gpu, index) in systemInfo.gpus"
          :key="index"
          class="gpu-card"
        >
          <h3 class="gpu-title">GPU-{{ index }}</h3>
          <div class="gpu-details">
            <div class="gauge-container">
              <el-progress
                type="dashboard"
                :percentage="calculateGpuUsage(gpu)"
                :color="getColorByPercentage(calculateGpuUsage(gpu))"
                :stroke-width="15"
              >
                <template #default>
                  <div class="gauge-inner-text">
                    <div>{{ calculateGpuUsage(gpu) }}%</div>
                  </div>
                </template>
              </el-progress>
            </div>
            <el-descriptions :column="1" border class="gpu-text-details">
              <el-descriptions-item label="GPU型号">{{
                gpu.model
              }}</el-descriptions-item>
              <el-descriptions-item label="总显存">{{
                formatBytes(gpu.total, "mb")
              }}</el-descriptions-item>
              <el-descriptions-item label="已使用">{{
                formatBytes(gpu.used, "mb")
              }}</el-descriptions-item>
              <el-descriptions-item label="可用显存">{{
                formatBytes(gpu.free, "mb")
              }}</el-descriptions-item>
              <el-descriptions-item label="使用率"
                >{{ calculateGpuUsage(gpu) }}%</el-descriptions-item
              >
            </el-descriptions>
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无GPU信息" />
    </el-card>
  </div>
</template>

<script setup>
// SystemStatus page component
import { getSystemInfo } from "@/api/modules/system";
import { ref, onMounted, onUnmounted, computed } from "vue";
import { formatBytes } from "@/utils/formatBytes";
// 系统信息数据
const systemInfo = ref({
  platform: null,
  memory: null,
  gpus: [],
});

// 获取系统信息
const fetchSystemInfo = async () => {
  try {
    const response = await getSystemInfo();
    systemInfo.value = response.data || {};
  } catch (error) {
    console.error("获取系统信息失败:", error);
  }
};

// 计算内存使用百分比
const memoryUsagePercentage = computed(() => {
  if (!systemInfo.value.memory) return 0;
  return Math.round(
    (systemInfo.value.memory.used / systemInfo.value.memory.total) * 100
  );
});

// 计算GPU使用百分比
const calculateGpuUsage = (gpu) => {
  return Math.round((gpu.used / gpu.total) * 100);
};

// 根据使用率返回不同颜色
const getColorByPercentage = (percentage) => {
  if (percentage <= 20) return "#67C23A"; // 浅绿色
  if (percentage <= 50) return "#409EFF"; // 浅蓝色
  if (percentage <= 70) return "#E6A23C"; // 橘色
  return "#F56C6C"; // 红色
};

// 格式化内存大小显示
const formatMemory = (bytes) => {
  if (!bytes) return "0 B";
  const units = ["B", "KB", "MB", "GB", "TB"];
  let value = bytes;
  let unitIndex = 0;

  while (value >= 1024 && unitIndex < units.length - 1) {
    value /= 1024;
    unitIndex++;
  }

  return `${value.toFixed(2)} ${units[unitIndex]}`;
};

// 组件挂载时获取系统信息
onMounted(() => {
  fetchSystemInfo();
  // 每30秒刷新一次系统信息
  const timer = setInterval(fetchSystemInfo, 30000);

  // 组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(timer);
  });
});
</script>

<style scoped>
.system-status-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-title {
  margin-bottom: 20px;
  color: #303133;
}

.status-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.platform-info {
  margin-top: 10px;
}

.memory-info,
.gpu-info {
  margin-top: 10px;
}

.gauge-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.gauge-inner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  line-height: 1.5;
}

.memory-details,
.gpu-text-details {
  margin-top: 20px;
}

.gpu-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gpu-card {
  margin-bottom: 20px;
}

.gpu-title {
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
}

/* 响应式布局 */
@media (min-width: 768px) {
  .memory-info,
  .gpu-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .gauge-container {
    flex: 1;
  }

  .memory-details,
  .gpu-text-details {
    flex: 1;
    margin-top: 0;
    margin-left: 20px;
  }
}
</style>
